<template>
  <div
    id="report-container"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-text="加载中"
  >
    <el-button icon="el-icon-download" type="primary" @click="downloadPDF"
      >下载PDF</el-button
    >
    <div ref="reportDetailRef" class="container">
      <!-- 概要 -->
      <div class="card">
        <div class="head">
          <span class="head-left"></span>
          <div class="head-number">概要</div>
          <div class="head-right">
            炉号：{{ stoveNumber }} | {{ startTime }} | {{ endTime }} |
            {{ workTime }}
          </div>
        </div>
        <div style="border-bottom: 1px solid rgba(236, 236, 236, 0.5)"></div>
        <div class="head-tag">
          <div class="head-tag-item">
            <div class="tag-title">
              {{ electricAmount4.power }}
            </div>
            <div class="tag-type">合计电量</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ activeElectricity }}</div>
            <div class="tag-type">有功电量</div>
            <div class="tag-bottom">
              <span class="tag-bottom-text"></span>
            </div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ electricAmount4.totalPrice }}</div>
            <div class="tag-type">总电价</div>
          </div>
          <div>
            <div class="tag-title">{{ electricAmount4.price }}</div>
            <div class="tag-type">单价</div>
          </div>
        </div>
        <div style="border-bottom: 1px solid rgba(236, 236, 236, 0.5)"></div>
        <div class="head-tag">
          <div class="head-tag-item">
            <div class="tag-title">{{ stopPower }}</div>
            <div class="tag-type">停电功率</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ stopStoveResistance }}</div>
            <div class="tag-type">停电炉阻</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ tonPrice }}</div>
            <div class="tag-type">吨耗(元)</div>
          </div>
          <div>
            <div class="tag-title">{{ tonElect }}</div>
            <div class="tag-type" style="width: 100px">吨耗(kwh)</div>
          </div>
        </div>
        <div style="border-bottom: 1px solid rgba(236, 236, 236, 0.5)"></div>
        <div class="head-tag">
          <div class="head-tag-item">
            <div class="tag-title">{{ customer }}</div>
            <div class="tag-type">客户</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ specification }}</div>
            <div class="tag-type">规格型号</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ totalWeight }}</div>
            <div class="tag-type">装炉(吨)</div>
          </div>
          <div>
            <div class="tag-title">{{ accessory }}</div>
            <div class="tag-type" style="width: 100px">附属品(吨)</div>
          </div>
        </div>
      </div>
      <!-- 装炉工单 -->

      <!-- 耗电量 -->
      <div class="card">
        <div class="head">
          <span class="head-left"></span>
          <div class="head-number">耗电量分布（不含基础电费）</div>
          <div class="head-right">
            {{ electricAmount4.power }}kWh | {{ electricAmount4.totalPrice }}元
            | {{ electricAmount4.price }}元/kWh
          </div>
        </div>
        <div class="tunnel-table">
          <table style="width: 100%">
            <tr class="item">
              <td>电度</td>
              <td>电量</td>
              <td>电量占比</td>
              <td>总价</td>
              <td>总价占比</td>
            </tr>
            <tr
              v-for="item in electricAmount"
              :key="item.key"
              v-if="item.name != '吨耗'"
            >
              <td>{{ item.name }}</td>
              <td>{{ item.power }}</td>
              <td>{{ item.powerPercent }}</td>
              <td v-if="item.name != '电量总计'">{{ item.totalPrice }}</td>
              <td v-else>{{ item.electConsumptionPrice }}</td>
              <td>{{ item.pricePercent }}</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 功率VS位移 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">功率VS位移</span>
        </div>
        <div ref="canvans3" v-show="!isShowEcharts"></div>
        <reportEchartsDoubleTwo
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="powerAndDisplace"
        />
      </div>
      <!-- 功率 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">功率</span>
        </div>
        <div ref="canvans0" v-show="!isShowEcharts"></div>
        <reportEchartsDouble
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="powerAndDisplace1"
        />
      </div>
      <!-- 电阻 -->
      <div class="placeholder"></div>
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电阻</span>
        </div>
        <div ref="canvans1" v-show="!isShowEcharts"></div>

        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="graTemper"
        />
      </div>
      <!-- 电压 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电压</span>
        </div>
        <div ref="canvans2" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA1"
        />
      </div>
      <!-- 电流 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电流</span>
        </div>
        <div ref="canvans3" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA2"
        />
      </div>
      <!-- 温度 -->
      <div class="placeholder placeholder2"></div>
      <div class="p-chart" prop>
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">温度</span>
        </div>
        <div ref="canvans4" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA3"
        />
      </div>
      <!-- 图片 -->
      <div class="imgShow" v-for="(item, index) in fileAddress" :key="index">
        <img :src="item" crossOrigin="anonymous" width="740px" height="740px" />
      </div>
      <StoveInfoReport
        @showStove="ShowStoveInfoReport = !ShowStoveInfoReport"
        :startTime="stoveStartTime"
        :endTime="stoveEndTime"
      />
    </div>
  </div>
</template>

<script>
import { getPowerReportData } from "@/api/process";
import ReportEchart from "./reportEchart.vue";
import StoveInfoReport from "./stoveInfo.vue";
import reportEchartsDouble from "./reportEchartsDouble.vue";
import reportEchartsDoubleTwo from "./reportEchartsDoubleTwo.vue";
export default {
  components: {
    ReportEchart,
    StoveInfoReport,
    reportEchartsDouble,
    reportEchartsDoubleTwo,
  },
  props: ["reportItem"],
  data() {
    return {
      fileAddress: [],
      ShowStoveInfoReport: true,
      fullscreenLoading: true,
      isShowEcharts: true,
      id: "",
      stoveStartTime: "",
      stoveEndTime: "",
      stoveNumber: "",
      endTime: "",
      startTime: "",
      electricAmount: [],
      electricAmount4: {},
      shoveCharge: [],
      powerAndDisplace: [],
      powerAndDisplace1: [],
      graTemper: [], // 炉阻
      stoveAndVA1: [], // 电压
      stoveAndVA2: [], // 电流
      stoveAndVA3: [], // 变压器
      selectChart: 1,
      stoveInfo: [],
      stoveReport2: {}, // b炉子
      stoveReport1: {
        electric: {
          startElectricTime: "",
          powerTime: [{ power: "" }],
          specialPowerTime: [
            { power: "" },
            { power: "" },
            { power: "" },
            { power: "" },
            { power: "" },
          ],
        },
      },
      // 历史报表新增字段
      stopDisplacement: "",
      totalNumber: "",
      totalWeight: "",
      activeElectricity: "",
      accessory: "",
      customer: "",
      specification: "",
      tonElect: "",
      tonPrice: "",
      stopStoveResistance: "",
      stopPower: "",
    };
  },
  computed: {
    workTime() {
      let a = new Date(this.startTime);
      let b = new Date(this.endTime);
      let subtime = (b - a) / 1000;
      let days = parseInt(subtime / 86400); //天  24*60*60*1000
      let hours = parseInt(subtime / 3600) - 24 * days; //小时  60*60  总小时数-过去小时数=现在小时数
      let mins = parseInt((subtime % 3600) / 60); //分钟 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数
      let secs = parseInt(subtime % 60);
      return days == 0
        ? hours + "小时 " + mins + "分钟 "
        : days + "天 " + hours + "小时 " + mins + "分钟 ";
    },
  },
  created() {
    console.log("当前行数据", this.$route.query);
    if (this.$route.query) {
      this.id = this.$route.query.id;
      this.tonElect = this.$route.query.tonElect;
      this.tonPrice = this.$route.query.tonPrice;
      this.customer = this.$route.query.customer;
      this.accessory = this.$route.query.accessory;
      this.specification = this.$route.query.specification;
      this.stoveStartTime = this.$route.query.startTime;
      this.stoveEndTime = this.$route.query.endTime;
      this.GetReportDataById();
    }
  },
  methods: {
    downloadPDF() {
      this.isShowEcharts = false;
      this.GeneratepPicture();
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.printpage();
      }, 2000);
    },
    GeneratepPicture() {
      this.fullscreenLoading = true;
      const mainCanvas = document.getElementsByTagName("canvas");
      for (let i = 0; i < mainCanvas.length; i++) {
        const item = mainCanvas[i];
        const imgRef = this.$refs["canvans" + i];
        const mainImg = new Image();
        const mainImgSrc = item.toDataURL("image/png");
        mainImg.src = mainImgSrc;
        mainImg.onload = () => {
          imgRef.innerHTML = `<img style="   width: 100%;height: 100%;" src=${mainImgSrc}>`; // 用图片替换 canvas
        };
      }
    },
    printpage() {
      // const oldInnerHtml = window.document.body.innerHTML
      window.document.body.innerHTML = this.$refs.reportDetailRef.innerHTML;
      window.print();
      window.location.reload();
      // window.document.body.innerHTML = oldInnerHtml
      return false;
    },
    // 获取工艺信息
    async GetReportDataById() {
      const abc = {
        // headTitle: this.id
        id: this.id,
      };
      const res = await getPowerReportData(abc);
      console.log("111", res);
      if (res.data.data.electricAmount == null) {
        this.electricAmount4 = new Array(8).fill("-");
      } else {
        this.electricAmount4 = res.data.data.electricAmount[5];
      }
      this.stoveNumber = res.data.data.stoveNumber;
      this.startTime = res.data.data.startTime;
      this.endTime = res.data.data.endTime;
      this.electricAmount = res.data.data.electricAmount;
      console.log(this.electricAmount, 12232);
      this.powerAndDisplace = JSON.parse(
        JSON.stringify(res.data.data.powerAndDisplace.source)
      ); // 功率位移
      this.powerAndDisplace1 = JSON.parse(
        JSON.stringify(res.data.data.powerAndDisplace.source)
      );
      this.stoveAndVA1 = res.data.data.workingData.source1; // 直流电压
      this.stoveAndVA2 = res.data.data.workingData.source2; // 直流电流
      this.stoveAndVA3 = res.data.data.workingData.source3; // 变压器
      this.graTemper = res.data.data.workingData.source4; // 炉阻
      // 加载完毕 设置为false
      this.fullscreenLoading = false;
      // 历史报表新增字段
      this.activeElectricity = res.data.data.activeElectricity; // 有功电量
      this.totalWeight = res.data.data.totalWeight; // 总重
      this.stopDisplacement = res.data.data.stopDisplacement; // 停电位移
      this.stopStoveResistance = res.data.data.stopStoveResistance; // 停电炉阻
      this.stopPower = res.data.data.stopPower; // 停电功率
      this.shoveCharge = res.data.data.chargeStove; //装炉报表
      this.fileAddress = res.data.data.fileAddress; //图片
    },
  },
};
</script>

